<script setup>
const value = ref('2021-10-29')
const month = ref('')
const year = ref('')
const holidays = [
  '2021-10-01',
  '2021-10-02',
  '2021-10-03',
  '2021-10-04',
  '2021-10-05',
  '2021-10-06',
  '2021-10-07',
]

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format('YYYY-MM-DD'))
}
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { onMounted,ref ,reactive} from 'vue';
    import api from '../api'
    import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
    const tableData = ref([]);
onMounted(async ()=>{
    checkData();
    getorders();
    getstaff();

})
//编辑
const editObj = ref({});
let dialogFormEdiit = ref(false);
//编辑车辆信息弹出
const openEdit =  (row)=>{
  //将数据存储到editObj上面
  editObj.value.id = row.id;
  editObj.value.orderid = row.orderid;
  editObj.value.checkdate = row.checkdate;
  editObj.value.demagedesc = row.demagedesc;
  editObj.value.cost = row.cost;
  editObj.value.status = row.status;
  editObj.value.staff = row.staff;
//打开
  dialogFormEdiit.value = true;
}
//保存修改后的数据
const saveEdit = async ()=>{
  formEditRef.value.validate(async (valid) => {
    if(valid){
      let result = await api.edit("api/check/edit" , editObj.value);
    console.log(result);
    dialogFormEdiit.value = false;
    if(result.code == 200){
      checkData();
          ElMessage({
        type: 'success',
        message: '普天同庆 修改成功！',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '不好意思 更新失败~',
      })
    }

    }else{
      ElMessage({
        type: 'info',
        message: '更新失败 值不可以为空~',
      })
    }
  })
    
    
  }
//定义存储搜索数据的变量
const checkObj = ref({
  page:1,
  size:6
});
//定义搜索数据的方法
const checkData = async (val)=>{
  if(typeof val == 'number'){
    checkObj.value.page = val;
  }
      //查询数据
      console.log(checkObj.value);//检查是否传入数据
      let result = await api.get("/api/check/select" , checkObj.value);
      // result {code , data , message}   data->{list , count}
      //更新页面数据
      tableData.value = result.data.list;
      total.value = result.data.count;
      console.log(tableData.value)
}
const total = ref(90);
//删除确认框 start
const open = (data) => {
  ElMessageBox.confirm(
    '你真的要删除这个检查信息吗？！',
    {
      confirmButtonText: '确定',
      cancelButtonText: '我后悔了',
      type: 'warning',
    }
  )
    .then( async () => {
      console.log(data);
        let result = await api.del("/api/check/del/" , data);
        if(result.code == 200){
         checkData();
          ElMessage({
        type: 'success',
        message: '错误的决定 删除成功了',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '嘿嘿 删除失败',
      })
    }
        })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '正确的决定！！！',
      })
    })
}

//删除确认框  end
const addObj = ref({});
//保存新添加的用户信息 start
const addSave = async ()=>{
  formRef.value.validate(async (valid) => {
      if(valid){
        let result = await api.add("/api/check/add",addObj.value);
  if(result.code == 200){
          checkData();
          ElMessage({
        type: 'success',
        message: '添加新订单成功',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '添加失败',
      })
    }
    dialogFormVisible.value = false;
    
      }else{
        dialogFormVisible.value = false;
        ElMessage({
        type: 'info',
        message: '失败 内容不能为空',
      })
      }

  })
 
    
}
const openadd = ()=>{
addObj.value = {};
  dialogFormVisible.value = true;
}
var dialogFormVisible = ref(false);
//添加新用户的操作 end

//表单验证start
const checkcustomer = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(addObj.value.orderid)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const checkvehicle = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(addObj.value.checkdate)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const checkstart = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(addObj.value.demagedesc)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const checkend = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(addObj.value.cost)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const checkprice = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(addObj.value.status)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const checkdeposit = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(addObj.value.staff)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const easyrules = {
  addorderid:[{validator:checkcustomer,trigger:'blur'}],
  addcheckdate:[{validator:checkvehicle,trigger:'blur'}],
  adddemagedesc:[{validator:checkstart,trigger:'blur'}],
  addcost:[{validator:checkend,trigger:'blur'}],
  addstatus:[{validator:checkprice,trigger:'blur'}],
  addstaff:[{validator:checkdeposit,trigger:'blur'}],

}
const formRef=ref({});
const formEditRef = ref({});
//表单验证end

//编辑的表单验证start
const editcustomer = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(editObj.value.orderid)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const editvehicle = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(editObj.value.checkdate)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const editstart = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(editObj.value.demagedesc)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const editend = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(editObj.value.cost)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const editprice = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(editObj.value.status)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const editdeposit = function(rule,value,callback,){
  let reg=/^(?!^$)(?!^null$)(?!^undefined$).+$/;
  if(reg.test(editObj.value.staff)){
        callback();
    }
    else{
        callback(new Error('输入不能为空'))
    }
}
const rules = {
  orderid:[{validator:editcustomer,trigger:'blur'}],
  checkdate:[{validator:editvehicle,trigger:'blur'}],
  demagedesc:[{validator:editstart,trigger:'blur'}],
  cost:[{validator:editend,trigger:'blur'}],
  status:[{validator:editprice,trigger:'blur'}],
  staff:[{validator:editdeposit,trigger:'blur'}],
}
//编辑的表单验证end
const options = [
  {
    value: "未开始",
    label:"未开始"
  },
  {
    value: "已完成",
    label:"已完成",
  },
  {
    value: "正在进行",
    label:"正在进行",
  }
]
const orderlist = ref([]);
const getorders = async function(){
  let result = await api.get("api/check/getorders");
  orderlist.value = result.data;
}
//获取员工数据
const stafflist = ref([]);
const getstaff = async function(){
  let result = await api.get("api/order/getstaff");
  stafflist.value = result.data;
}
</script>


<template>
   <div style="display: flex; align-items: center;">
    <el-button type="info" plain @click = "checkData">搜索</el-button>
    <el-form :model="checkObj">
    <el-input v-model="checkObj.staff" style="width: 240px" placeholder="请输入检查人员的姓名部分" />
    <el-button plain @click="openadd" type="primary" round >添加</el-button>
  </el-form>
</div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column fixed prop="id" label="检查编号" />
      <el-table-column prop="orderid" label="订单编号" />
      <el-table-column prop="checkdate" label="检查日期" />
      <el-table-column prop="demagedesc" label="损坏描述" />
      <el-table-column prop="cost" label="预计花费" />
      <el-table-column prop="status" label="检查状态" />
      <el-table-column prop="staff" label="检查人员" />
      <el-table-column fixed = "right" label="操作"width="120">
        <template #default = "scope">
        <el-button plain @click="openEdit(scope.row)" type="primary" :icon="Edit" circle />
        <el-button plain @click="open(scope.row.id)" type="danger" :icon="Delete" circle/>
    </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
  :page-size = "checkObj.size"
  :current-page = "checkObj.page"
   background layout="prev, pager, next" :total="total" @current-change="checkData" />
   <!--分页-->
    <!--编辑弹出框-->
    <el-dialog v-model="dialogFormEdiit" title="修改信息" width="500">
    <el-form 
    :model="editObj"
    :rules="rules"
    ref="formEditRef"
    >
      <el-form-item label=" 订单编号：" :label-width="formLabelWidth" prop = "orderid">
        <el-input v-model="editObj.orderid" autocomplete="off" placeholder="请输入订单ID"/>
      </el-form-item>
      <el-form-item label="检查日期：" :label-width="formLabelWidth" prop = "checkdate">
        <el-date-picker
      v-model="editObj.checkdate"
      type="date"
      placeholder="Pick a day"
      format="YYYY/MM/DD"
      value-format="YYYY-MM-DD"
    >
      <template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text }}</span>
          <span v-if="isHoliday(cell)" class="holiday" />
        </div>
      </template>
    </el-date-picker>
      </el-form-item>
      <el-form-item label="损坏情况：" :label-width="formLabelWidth" prop = "demagedesc">
        <el-input v-model="editObj.demagedesc" autocomplete="off" placeholder="请输入损坏情况"/>
      </el-form-item>
      <el-form-item label="预计花费：" :label-width="formLabelWidth" prop = "cost">
        <el-input v-model="editObj.cost" autocomplete="off" placeholder="请输入预计花费"/>
      </el-form-item>
      <el-form-item label="检查状态：" :label-width="formLabelWidth" prop = "status">
        <el-select v-model="editObj.status" placeholder="请选择检查状态" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value ="item.value"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="检查人员：" :label-width="formLabelWidth" prop = "staff">
        <el-input v-model="editObj.staff" autocomplete="off" placeholder="请选择检查人员"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormEdiit = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!--编辑弹出框-->
 <!--添加新检查的弹出框-->
 <el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form 
    :model="addObj"
    :rules="easyrules"
    ref="formRef"
    >
      <el-form-item label="订单编号：" :label-width="formLabelWidth" prop="addorderid">
        <el-select v-model="addObj.orderid" placeholder="请选择订单编号" autocomplete="off" >
        <el-option
        v-for = "order in orderlist"
        :key="order.id"
        :label = "order.id"
        :value = "order.id"
        />
      </el-select>
      </el-form-item>
      <el-form-item label="检查日期：" :label-width="formLabelWidth" prop="addcheckdate">
        <el-date-picker
      v-model="addObj.checkdate"
      type="date"
      placeholder="Pick a day"
      format="YYYY/MM/DD"
      value-format="YYYY-MM-DD"
    >
      <template #default="cell">
        <div class="cell" :class="{ current: cell.isCurrent }">
          <span class="text">{{ cell.text }}</span>
          <span v-if="isHoliday(cell)" class="holiday" />
        </div>
      </template>
    </el-date-picker>

      </el-form-item>
      <el-form-item label="损坏描述：" :label-width="formLabelWidth" prop="adddemagedesc">
        <el-input v-model="addObj.demagedesc" autocomplete="off" placeholder="请输入损坏描述" />
      </el-form-item>
      <el-form-item label="预计花费：" :label-width="formLabelWidth" prop="addcost">
        <el-input v-model="addObj.cost" autocomplete="off" placeholder="请输入预计花费" />
      </el-form-item>
      <el-form-item label="检查状态：" :label-width="formLabelWidth" prop = "status">
        <el-select v-model="addObj.status" placeholder="请选择检查状态" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value ="item.value"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="检查人员：" :label-width="formLabelWidth" prop="addstaff">
        <el-select v-model="addObj.staff" placeholder="请选择检查员工" autocomplete="off">
        <el-option
        v-for = "cus in stafflist"
        :key="cus.id"
        :label = "cus.name"
        :value = "cus.name"
        />
      </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!--添加新用户的弹出框-->
  </template>
  
  
  
  <style>
  .el-table {
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: #000000;
    --el-table-header-text-color: #0b0b0b;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
}
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  demo-date-picker {
  display: flex;
  justify-content: space-between;
}

.cell {
  height: 30px;
  padding: 3px 0;
  box-sizing: border-box;
}

.cell .text {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.cell.current .text {
  background: #626aef;
  color: #fff;
}

.cell .holiday {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--el-color-danger);
  border-radius: 50%;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
  </style>